<template>
    <div class="edit-gallery">
        <div class="edit-gallery_topbar">
            <p class="edit-gallery_topbar_title">新建摄影图库</p>
            <yk-space>
                <yk-button type="secondary" @click="cancel">取消</yk-button>
                <yk-button @click="submit(1)">发布</yk-button>
            </yk-space>
        </div>
        <yk-space style="width: 100%;max-width: 1150px; min-width: 1080px;">
            <GalleryEdit @editors="editorData" @cover="coverData"
                :gallery-data="{ cover: defaultArticle?.cover, content: defaultArticle?.content }" />
            <div class="edit-form">
                <Forms style="width: 420px;" :classify="1" @formData="formData" :galData="defaultArticle" />
            </div>
        </yk-space>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import GalleryEdit from '../components/gallerys/gallery-edit.vue';
import Forms from '../components/forms/forms.vue';
import { useArticle } from '../hooks/articleHook';
import { useRouter, useRoute } from 'vue-router';
const route = useRoute();
const router = useRouter();
const {
    submit,
    formData,// 文章表单数据
    editorData,
    defaultArticle,
    getArticleById,
    coverData,
} = useArticle(); // 管理文章选择

const id = ref<number>()
if (route.query.id) {
    id.value = Number(route.query.id);
}


//点击取消跳转到图库列表页
const cancel = () => {
    router.push({
        path: '/gallery',
    })
}


onMounted(() => {
    if (id.value) {
        getArticleById(id.value)
    }
})
</script>
<style scoped lang="less">
.edit-gallery {
    padding: @space-xl 160px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;

    &_topbar {
        display: flex;
        justify-content: space-between;
        padding: @space-l @space-xl;
        border-radius: @radius-m;
        background: @bg-color-l;
        margin-bottom: @space-l;
        width: 100%;
        max-width: 1150px;
        min-width: 1080px;

        &_title {
            .font-xl();
            font-weight: 600;
        }
    }

    .edit-form {
        background: @bg-color-l ;
        border-radius: @radius-m;
        padding: 48px;
        flex: none;
        display: flex;
        justify-content: center;
    }
}
</style>